<template>
	<view class="body" :class="{'no-scroll': isMask}">
		<!-- <view v-if="isMask" class="mask" @click="onMask"></view> -->
		<view class="bg">
			<image :src="$IMAGE_BASE_URL2 + '/yangcan/bg.png'" style="width: 100%; height:671rpx;margin: auto; display: block;"></image>
		</view>
		<view class="top">
			<u-navbar :border-bottom='false' title-color='#fff' back-icon-color='#fff' background="" title="氧舱详情"
				:is-fixed='false'></u-navbar>
		</view>
		<view class="latest-data top">
			<view class="tongji">
				数据统计
			</view>
			<view style="padding: 20rpx;">
				<view style="display: flex;border-bottom: 1px solid #d1d1d1;;">
					<view class="title">吸氧时间:</view>
					<view class="data">{{item?$u.timeFormat(item.startTime, 'yyyy-mm-dd hh:MM'):'--'}}</view>
				</view>
				<view style="display: flex;flex-wrap: wrap;">
					<view class="vital-signs">
						<view class="name">
							<image src="@/img/yangcan/xl.png"
								style="width: 32rpx; height:26rpx;display: block;margin-right: 10rpx; margin-top: 6rpx;">
							</image>心率
						</view>
						<view class="num">{{item?item.avgHr:'--'}}<text class="unit">bpm</text></view>
					</view>
					<view class="vital-signs">
						<view class="name">
							<image src="@/img/yangcan/hx.png"
								style="width: 33rpx; height:33rpx;display: block;margin-right: 10rpx;margin-top: 4rpx;">
							</image>呼吸
						</view>
						<view class="num">{{item?item.avgRr:'--'}}<text class="unit">次/分</text></view>
					</view>
					<!-- 舱内数据 -->
					<view class="vital-signs">
						<view class="name">
							<image src="@/img/yangcan/cnyl.png"
								style="width: 40rpx; height:40rpx;display: block;margin-right: 10rpx;margin-top: 0rpx;">
							</image>舱内压力
						</view>
						<view class="num">{{item?item.avgPressure/10:'--'}}<text class="unit">kpa</text></view>
					</view>
					<view class="vital-signs">
						<view class="name">
							<image src="@/img/yangcan/sj.png"
								style="width: 38rpx; height:38rpx;display: block;margin-right: 10rpx;margin-top: 1rpx;">
							</image>时间
						</view>
						<view class="num">{{item?item.totalTime:'--'}}<text class="unit">分钟</text></view>
					</view>
				</view>
				<!-- 健康状态 -->
				<view class="health-status">
					<view>
						<text class="name">疲劳程度</text>
						<text class="jieguo">{{interval.arrhythmia}}</text>
					</view>
					<view>
						<text class="name">心率不齐</text>
						<text class="jieguo">{{interval.fatigue}}</text>
					</view>
				</view>
			</view>

		</view>
		<view class="chart">
			<view class="name">心率</view>
			<lechart v-if="parentData.startTime" :parentData='parentData' :setFuTime='setTime'></lechart>
		</view>
		<view class="chart">
			<view class="name">呼吸</view>
			<lechart v-if="parentData2.startTime" :parentData='parentData2' :setFuTime='setTime'></lechart>
		</view>
		<view class="chart">
			<view class="name">舱内压力</view>
			<lechart v-if="parentData3.startTime" :parentData='parentData3' :setFuTime='setTime'></lechart>
		</view>
		<view class="chart">
			<view class="name">设备参数</view>
			<view style="display: flex;flex-wrap: wrap;">
				<view class="canshu">
					<view class="name">
						<view class="yuan"></view>
						温度
					</view>
					<view class="num">
						{{interval.wendu?interval.wendu.minValue/10:'--'}}℃-{{interval.wendu?interval.wendu.maxValue/10:'--'}}℃
					</view>
				</view>
				<view class="canshu">
					<view class="name">
						<view class="yuan" style="background-color: #5a8ef7;"></view>
						制氧浓度
					</view>
					<view class="num">
						{{interval.o2?interval.o2.minValue/10:'--'}}%-{{interval.o2?interval.o2.maxValue/10:'--'}}%
					</view>
				</view>
				<view class="canshu">
					<view class="name">
						<view class="yuan" style="background-color: #68cdbd;"></view>
						制氧流量
					</view>
					<view class="num">
						{{interval.o2liulang?interval.o2liulang.minValue/10:'--'}}%-{{interval.o2liulang?interval.o2liulang.maxValue/10:'--'}}%
					</view>
				</view>
				<view class="canshu">
					<view class="name">
						<view class="yuan" style="background-color: #67aa82;"></view>
						湿度
					</view>
					<view class="num">
						{{interval.shidu?interval.shidu.minValue/10:'--'}}%-{{interval.shidu?interval.shidu.maxValue/10:'--'}}%
					</view>
				</view>
				<view class="canshu">
					<view class="name">
						<view class="yuan" style="background-color: #f17442;"></view>
						二氧化碳浓度
					</view>
					<view class="num">
						{{interval.co2?interval.co2.minValue/100:'--'}}%-{{interval.co2?interval.co2.maxValue/100:'--'}}%
					</view>
				</view>
				<view style="width: 48%;margin: auto;">
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import lechart from "../chart/index.vue";
	import * as echarts from '../components/echarts.esm.min.js'
	import {
		getCurrentPage
	} from '@/core/app'
	import StorageUtils from "@/utils/StorageUtils";
	import SimDevice from '@/service/mqtt/sim/SimDevice.js';
	import {
		DeviceBasicData
	} from '@/service/mqtt/DeviceConfig.js';
	import {
		historyPropert,
		getStatistics,
	} from "@/api/device/index.js";
	export default {
		components: {
			lechart,
		},
		data() {
			return {
				deviceInfo: {},
				interval: {
					minMinValue: 0,
					maxMaxValue: 0,
					arrhythmia: '--',
					fatigue: '--',
				},
				parentData: {
					identifier: 'hr',
					name: '心率',
					color: ["#f9025a", '#ffebf0', '#ffb8c9'],
					showChooseDay: false,
					showDay: true,
				},
				parentData2: {
					identifier: 'rr',
					name: '呼吸',
					color: ["#0595fb", '#dfefff', '#4cabf9'],
					showChooseDay: false,
					showDay: true,
				},
				parentData3: {
					identifier: '4000',
					name: '舱内压力',
					color: ["#26c37b", '#fff', '#d3f3e3'],
					showChooseDay: false,
					showDay: true,
				},
				item: {}
			}
		},
		onReady() {
			this.item = JSON.parse(decodeURIComponent(getCurrentPage().query.item));
			this.deviceList = JSON.parse(decodeURIComponent(getCurrentPage().query.deviceList));
			// this.mqtt(this.deviceList)
			this.parentData = {
				...this.parentData,
				startTime: new Date(this.item.startTime).getTime(),
				endTime: new Date(this.item.endTime).getTime(),
			}
			this.parentData2 = {
				...this.parentData2,
				startTime: new Date(this.item.startTime).getTime(),
				endTime: new Date(this.item.endTime).getTime(),
			}
			this.parentData3 = {
				...this.parentData3,
				startTime: new Date(this.item.startTime).getTime(),
				endTime: new Date(this.item.endTime).getTime(),
			}
			console.log(this.parentData);
			this.getInterval(this.item)
		},
		onHide() {
			if (this.mqttPing) {
				clearInterval(this.mqttPing);
				this.simDevice.close();
			}
		},

		methods: {
			setTime(startTime, endTime, isMonthly, timeFrame) {
				this.startTime = startTime
				this.endTime = endTime
				this.isMonthly = isMonthly
				this.timeFrame = timeFrame
				// this.gettongji();
			},
			getInterval(item) {
				historyPropert({//找出val重复最多的
					startTime: new Date(item.startTime).getTime(),
					endTime: new Date(item.endTime).getTime(),
					current: 1,
					size: 10000,
					identifier: 'arrhythmia,fatigue'
				}).then(res => {
					// 创建一个对象来统计每个key下的value出现的次数
					const keyValueCount = {};
					// 遍历数组，统计每个key下的value出现的次数
					if (res.obj.records.length != 0) {
						res.obj.records.forEach(item => {
							const {
								key,
								value
							} = item;
							if (!keyValueCount[key]) {
								keyValueCount[key] = {};
							}
							if (keyValueCount[key][value]) {
								keyValueCount[key][value]++;
							} else {
								keyValueCount[key][value] = 1;
							}
						});
						// 找出每个key下出现次数最多的value
						const result = {};
						for (const key in keyValueCount) {
							let maxValue = null;
							let maxCount = 0;
							for (const value in keyValueCount[key]) {
								if (keyValueCount[key][value] > maxCount) {
									maxValue = value;
									maxCount = keyValueCount[key][value];
								}
							}
							result[key] = {
								value: maxValue,
								count: maxCount
							};
						}
						this.interval.arrhythmia = result.arrhythmia.value
						this.interval.fatigue = result.fatigue.value
					}
				})
				let arr=[2002,2003,2004,2005,2006];
				arr.map(val=>{
					getStatistics({//找出最大最小
						startTime: new Date(item.startTime).getTime(),
						endTime: new Date(item.endTime).getTime(),
						isMonthly :false,
						identifier: val
					}).then(res => {
						if(val == '2002'){
							this.interval.wendu=res.obj[0]
						}
						if(val == '2003'){
							this.interval.shidu=res.obj[0]
						}
						if(val == '2004'){
							this.interval.co2=res.obj[0]
						}
						if(val == '2005'){
							this.interval.o2=res.obj[0]
						}
						if(val == '2006'){
							this.interval.o2liulang=res.obj[0]
						}
						console.log(this.interval);
					})
				})
				
			},

			mqtt(device) {
				let deviceBasicData = new DeviceBasicData('', '', undefined);
				this.simDevice = new SimDevice();
				let url = '47.97.72.174:1887';
				// let url = '123.60.177.231:1887';
				deviceBasicData.username = '1559108322@qq.com';
				deviceBasicData.password = '123456';
				deviceBasicData.addr = url;
				let that = this;
				this.simDevice.clientDataListener = {
					onHandle: (topic, msg) => {
						msg = msg.replace(/'/g, '"');
						if (JSON.parse(msg).method === 'thing.service.property.post') {
							let info = JSON.parse(msg);
							let item = info.params;
							let data = {}
							if (item == undefined) {
								return false;
							}
							this.deviceInfo = {
								...this.deviceInfo,
								...item,
								...data
							}
							console.log(that.deviceInfo);
						}
					},
					onSetProperty: (requestPayload) => {
						let params = requestPayload.params;
					},
					onConnect(success) {
						// console.log('连接服务器:' + success);
						if (success) {
							device.map(val => {
								that.simDevice.subscribe(val.productKey, val.deviceName)
							})
							that.mqttPing = setInterval(() => {
								that.simDevice.ping()
							}, 30000);
						}
					},
					onClose() {
						console.log('连接关闭');
					}
				};
				this.simDevice.init(deviceBasicData);
				this.simDevice.connectServer();
			},
		}
	}
</script>


<style lang="scss">
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.body {
		padding: 0 28rpx 0;
		color: #040303;
		background-color: #feebd6;
		overflow: hidden;
	}

	.top {
		position: relative;
		z-index: 99;
	}

	.no-scroll {
		position: fixed;
		width: 100%;
		height: 100vh;
		/* 设置为视口高度 */
		overflow: hidden;
	}

	.chart {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.name {
			font-size: 30rpx;
			font-weight: bold;
			line-height: 50rpx;
			margin-bottom: 20rpx;
		}
	}

	.canshu {
		background-color: #f5f5f7;
		width: 48%;
		margin: auto;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.name {
			display: flex;
			font-size: 20rpx;
			color: #767676;
			line-height: 24rpx;

			.yuan {
				width: 12rpx;
				height: 12rpx;
				border-radius: 6rpx;
				background-color: #f5bd6d;
				margin-top: 6rpx;
				margin-right: 10rpx;
			}
		}

		.num {
			color: #1d1a1a;
			text-align: center;
			font-size: 30rpx;
			line-height: 50rpx;
		}
	}

	.latest-data {
		background-color: #fff;
		color: #1d1a1a;
		border-radius: 10rpx;
		margin-bottom: 20rpx;

		.tongji {
			background-color: #ff8e1a;
			color: #fff;
			font-size: 36rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 10rpx 10rpx 0 0;
		}

		.title {
			font-size: 30rpx;
			font-weight: bold;
			line-height: 70rpx;

		}

		.data {
			font-size: 24rpx;
			font-weight: bold;
			line-height: 70rpx;
			margin-left: 10rpx;
		}

		.vital-signs {
			background-color: #fff9f1;
			width: 47%;
			padding: 20rpx;
			height: 160rpx;
			margin: 10rpx auto;

			.name {
				line-height: 40rpx;
				font-size: 26rpx;
				display: flex;
			}

			.num {
				font-size: 66rpx;
				text-align: center;

				.unit {
					font-size: 20rpx;
					color: #78787b;
				}
			}
		}

		.health-status {
			height: 160rpx;
			background: url('@/img/yangcan/plbg.png') no-repeat 100% 100%;
			display: flex;
			padding: 30rpx;
			text-align: center;
			font-weight: bold;
			border-radius: 10rpx;
			margin: 20rpx 0;
			width: 98%;

			view {
				width: 50%;
			}

			.name {
				font-size: 24rpx;
				line-height: 32rpx;
				display: block;
			}

			.jieguo {
				font-size: 36rpx;
				color: #ff781d;
				line-height: 90rpx;
				display: block;
			}
		}
	}

	// f5a94d  ff6e3b
</style>